<template>
  <div v-model="currentBook">
    <el-row>
      <el-col :span="17">
        <div style="text-align: left; font-weight: 500; font-size: 27px">
          <span style="color: #444">书名：</span>
          <span>{{ currentBook.name }}</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="1.5" style="padding-top: 20px">
            <el-image :src="currentBook.url" style="height: 143px"></el-image>
          </el-col>
          <br>
          <el-col :span="7" style="text-align: left">
            <p>篇幅：<a href="readBook.vue">{{ currentBook.type }}</a></p>
            <p>分类：<a href="bookDetail.vue">{{ currentBook.kind }}</a></p>
            <div>作者：<span class="d">{{ currentBook.author }}</span></div>
            <div>状态：<span class="d">{{ currentBook.status }}</span></div>
            <div>大小：<span class="d">{{ currentBook.size }}</span></div>
            <div>最新章节：<span class="d">{{ currentBook.lastChapter }}</span></div>
            <div>最新时间：<span class="d">{{ currentBook.lastUpdateTime }}</span></div>
          </el-col>
        </el-row>
        <br>
        <hr>
        <el-row style="text-align: left">
          <el-col :span="15">
            <p style="font-weight: 500; font-size: 28px; color: #444">小说简介:</p>
            <br>
            <br>
            <div v-html="currentBook.introduction"
                 style="font-size: 16px; letter-spacing:2px; line-height: 29px; text-indent: 28px"></div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="text-align: left; padding-top: 20px">
      <el-col :span="5">
        <el-button type="primary" @click="checkout(currentBook)">在线阅读</el-button>
      </el-col>
      <el-col :span="4">
        <el-row style="border: #999999 solid 1px; border-radius: 6px; background-color: #E0FFFF;">
          <div @click="collectBook" style="height: 30px;">
            <el-col :span="8">
              <el-image :src="currentBook.collected === 1?'../../../static/已收藏.png':'../../../static/点击收藏.png'"
                        alt="" style="margin-left: 13px; padding-top: 10px; width: 20px; height: 20px"/>
            </el-col>
            <el-col :span="16">
              <div style="padding-top: 10px; color: palevioletred">{{ currentBook.isCollect }}</div>
            </el-col>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <br>
    <br>
    <el-row>
      <el-input
        style="width: 50%"
        type="textarea"
        placeholder="请输入评论内容"
        v-model="comment"
        maxlength="40"
        show-word-limit>
      </el-input>
      <el-button style="line-height: 28px" @click="saveComment()">发布</el-button>
    </el-row>
    <br>
    <div style="width: 50%; border-left: #999999 solid 1px; font-size: 14px">
      <div style="text-align: left" v-for="info in commentsInfo" :key="info.id">
        <el-row :gutter="24">
          <el-col :span="2">
            <el-avatar :src="info.fromAvatar"></el-avatar>
          </el-col>
          <el-col :span="8">
            <div style="margin-top: 5px; color: palevioletred;">{{ info.fromName }}</div>
          </el-col>
        </el-row>
        <div style="margin-left: 61px">
          <div>{{ info.content }}</div>
          <div>
            <span style="color: #999">{{ info.updateTime }}</span>
            <el-button type="text" style="padding-left: 10px;" @click="dianZanAdd()">
              <img src="../../../static/dz.png" alt=""/>
            </el-button>
            <span>{{ info.likeNum }}</span>
            <span style="color: cornflowerblue" @click="changeShow('info'+info.id)">回复</span>
            <div v-show="'info'+info.id === currentId">
              <el-input placeholder="请输入回复内容" style="width: 80%" v-model="replyText"></el-input>
              <el-button @click="saveReply(info, info)">发布</el-button>
            </div>
          </div>
        </div>
        <div style="width: 80%; margin-left: 8%;">
          <div style="text-align: left" v-for="reply in info.reply" :key="reply.id">
            <el-row :gutter="22">
              <el-col :span="2">
            <span>
          <el-avatar :src="reply.fromAvatar"></el-avatar>
        </span>
              </el-col>
              <el-col :span="15">
                <div style="padding-top: 13px;">
                  <span style="color: palevioletred">{{ reply.fromName }}</span>&nbsp;回复&nbsp;<span
                  style="color: coral">{{ reply.toName }}</span>：
                </div>
              </el-col>
            </el-row>
            <div style="padding-left: 47px">
              <div>{{ reply.content }}</div>
              <div style="padding-top: 10px">
                <span style="color: #999">{{ reply.updateTime }}</span>
                <span style="color: cornflowerblue" @click="changeShow('reply'+reply.id)">回复</span>
                <div v-show="'reply'+reply.id === currentId">
                  <el-input placeholder="请输入回复内容" style="width: 80%" v-model="replyText"></el-input>
                  <el-button @click="saveReply(info,reply)">发布</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bookDetail",
  data() {
    return {
      currentBook: {},
      currentId: '',
      comment: '',
      replyText: '',
      commentsInfo: [],
      commentsReply: [],
      currentUser: {}

    }
  },
  created() {
    const query = this.$route.query;
    this.getById(query.id);
  },
  methods: {
    collectBook() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/book-collect/collect", {
          bookId: this.currentBook.id
        }, {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.$message.success(res.data.data);
            this.getById(this.currentBook.id);
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    saveReply(info, reply) {
      this.currentId = '';
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/comments-reply/insert", {
          commentId: info.id,
          toId: reply.fromId,
          content: this.replyText
        }, {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.getCommentsInfo();
            this.replyText = '';
            this.$message.success(res.data.data);
          } else {
            this.$message.error(res.data.data);
          }
        })
      }
    },
    changeShow(pa) {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      }
      this.currentId = pa;
    },
    dianZanAdd() {
      //TODO 每个人只能点一次
      console.log("dianzan")
    },
    getCommentsInfo() {
      this.$axios.post("/comments-info/page", {
        mainId: this.currentBook.id
      }).then(res => {
        if (res.data.code === '200') {
          this.commentsInfo = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    saveComment() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        let comment = this.comment;
        this.comment = '';
        this.$axios.post("/comments-info/insert", {
          type: 3,
          ownerId: this.currentBook.id,
          content: comment
        }, {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.$message.success(res.data.data);
            this.getCommentsInfo();
          } else {
            this.$message.error(res.data.data);
          }
        })
      }
    },
    checkout(book) {
      this.$router.push({path: "/chapter/list", query: book})
    },
    getById(id) {
      this.$axios.post("/book-message/detail", {
        "id": id
      }).then(res => {
        if (res.data.code === '200') {
          this.currentBook = res.data.data;
          this.getCommentsInfo();
        } else {
          this.$message.error(res.data.message);
        }
      })
    }
  }
}
</script>

<style scoped>
.d{
  color: #409EFF;
}
p{
  color: #000;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
